<template>
  <div class="ChargingPileInfo">
    <div class="info">
      <div class="dip"> 
        <div class="titleInfo">实时数据</div>
        <div class="infoIcon"></div>
        <div class="date">
          <div class="day">
            <span >今天</span>
            <span>355.7度</span>
          </div>
          <div class="moth">
            <span>本月</span>
            <span>530.7度</span>
          </div>
        </div>
      </div>
      <div class="dip time">
        <div class="titleInfo">充电金额</div>
        <div class="infoIcon icon2"></div>
        <div class="date date2">
          <div class="day">
            <span  >今天</span>
            <span>25.5元</span>
          </div>
          <div class="moth">
            <span>本月</span>
            <span>530.7元</span>
          </div>
        </div>
      </div>

      <div class="dip">
        <div class="titleInfo">订单数</div>
        <div class="infoIcon icon3"></div>
        <div class="date date3">
          <div class="day">
            <span>今天</span>
            <span>50次</span>
          </div>
          <div class="moth">
            <span>本月</span>
            <span>60次</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style  scoped>
.ChargingPileInfo {
  background: url("../../../assets/image/page/1586311349.png") no-repeat;
  background-position-x: 20px;
  background-position-y: 70px;
  width: 531px;
  height: 350px;
}
.info {
  /* display: flex; */
  align-items: center;
  float: right;
}
.dip {
  display: flex;
  align-items: center;
   margin-top: 20px;
justify-content:flex-end;
margin-right: 10px;

}
.titleInfo {
  width: 109px;
  height: 38px;
  background-color: #007880;
  line-height: 38px;
  text-align: center;
  border-radius: 15px;
  color: aliceblue;
  font-weight: 500;
  font-size: 18px;
}
.infoIcon {
  background: url("../../../assets/image/page/C.png");
  width: 62px;
  height: 70px;
  margin-right: 16px;
  margin-left: 16px;
}
.icon2 {
  background: url("../../../assets/image/page/InfoMoney.png");
}
.icon3 {
  background: url("../../../assets/image/page/quantity.png");
}
.date {
  color: #07c5d6;
}
.day :last-child,.moth :last-child {
font-size: 16px;
}
.day :first-child,.moth :first-child {
    font-size: 12px;
} 
.info :nth-child(2)> .titleInfo {
    background-color: #a862f7;
}
.info :nth-child(3)> .titleInfo {
    background-color: #184ab6;
}
.date2 {
    color:#a862f7;
}
.date3{
    color: #184ab6;
}
.time {
    margin-right: 50px;
}

</style>